<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考试学员管理</title>
</head>
<body>

	<div class="easyui-layout" data-options="fit:true,border:false">
		<div data-options="region:'west',split:true,hideCollapsedContent:false,title:'专业类别'" style="width:240px;">
			<ul id="sblb20200530"></ul>
		</div>
		<div data-options="region:'center',border:true">
			<div id="toolbar20210220" style="padding: 4px;">
				<form>
					<a href="javascript:" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
					<a href="javascript:" class="easyui-linkbutton" iconCls="icon-no" plain="true">删除</a>
					<a href="javascript:" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
					<a href="javascript:" class="easyui-linkbutton"  plain="true">Excel导入</a>
					<a href="javascript:" class="easyui-linkbutton"  plain="true">Excel模版下载</a>
					<input class="easyui-searchbox" data-options="prompt:'请输入查找内容',menu:'#mm-searchbox-2021-6-5'" style="width: 220px;" >
					<input class="easyui-radiobutton" id="sbczzt3" name="sbczzt" value="3" data-options="label:'全部',labelPosition:'after',checked: true">
					<input class="easyui-radiobutton" id="sbczzt2" name="sbczzt" value="2" data-options="label:'大于等于60',labelPosition:'after'">
					<input class="easyui-radiobutton" id="sbczzt1" name="sbczzt" value="1" data-options="label:'小于60',labelPosition:'after'">
				</form>
			</div>
			<table id="menu_edit_20181029"></table>
		</div>
	</div>
	<div id="mm-searchbox-2021-6-5">
		<div data-options="name:'all'">姓名</div>
		<div data-options="name:'sports'">学号</div>
	</div>








	<script>
		//处理点击radiobutton处理的事件
		$(function () {
			$('#sbczzt3').radiobutton({
				onChange: function (checked) {
					situationFun(3,checked)
				}
			});
			$('#sbczzt2').radiobutton({
				onChange: function (checked) {
					situationFun(2,checked)
				}
			});
			$('#sbczzt1').radiobutton({
				onChange: function (checked) {
					situationFun(1,checked)
				}
			});
		});

		function situationFun(situation,checked) {
			if(!checked) return;
			$('#menu_edit_20181029').datagrid('load',{
				situation: situation
			});
		}

	</script>


	<div id="mm_20181030" class="easyui-menu" style="width:120px;display: none;">
	    <div data-options="iconCls:'icon-add',id:'m-addF-201900722'">新增</div>
	    <div data-options="iconCls:'icon-edit',id:'m-update-20190722'">修改</div>
		<div data-options="id:'m-delete-20190722'">删除</div>
	</div>

	<!-- 树结构的右击菜单 -->
	<div id="treeCRUD20200606" class="easyui-menu" style="width:120px;">
		<div data-options="iconCls:'icon-add',id:'tree-add0606lb'">添加类别</div>
		<div class="menu-sep"></div>
		<div data-options="id:'tree-add0606zjd'">添加子节点</div>
		<div data-options="id:'tree-add0606update'">修改</div>
		<div class="menu-sep"></div>
		<div data-options="iconCls:'icon-no',id:'tree-add0606delete'">删除</div>
	</div>

	<!--  树结构添加、修改的对话框	-->
	<div id="dialog_20200606_tree" style="padding:10px 30px;display: none;">
		<form id="tree_form20200607" method="post" data-options="novalidate:true" >
			<div style="margin-bottom:20px">
				<input class="easyui-textbox" id="title_tree" name="title" style="width:100%" data-options="label:'栏目名称:',required:true">
			</div>
		</form>
	</div>
	<div id="dialog_buttons_20200606" style="display: none;">
		<a href="javascript:$('#dialog_20200606_tree').dialog('close')" class="easyui-linkbutton">放弃</a>
		<a href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="treeUpdataAndInsert20200607()">保存</a>
	</div>

	<script>

		$(function () {
			$.getJSON('./../category/getCategory',{state:1}, function(json){
				let data = json.rows;
				$('#sblb20200530').tree({
					data: data
				});
			});

			//列表鼠标右击菜单
			$('#mm_20181030').menu({
				onClick:function(item){
					let menuTitle = item.text;
					if(item.id == 'm-update-20190722'){
						let rowData = $('#menu_edit_20181029').datagrid('getSelected');

						$('#uploadImage20200602Button').show();
						$('#dialog_20190723_addOrUpdateOrMenu').dialog('open').dialog('center').dialog('setTitle',menuTitle);
					}
					if(item.id == 'm-addF-201900722'){
						$('#uploadImage20200602Button').hide();
						$('#dialog_20190723_addOrUpdateOrMenu').dialog('open').dialog('center').dialog('setTitle',menuTitle);
					}
					if(item.id == 'm-delete-20190722'){
						$.messager.confirm('提示','确定要下架吗?下架后小程序里将看不到该信息！',function(r){
							if (r){
								let rowData = $('#menu_edit_20181029').datagrid('getSelected');
								let ids = [rowData.id];
								deleteDatagrid(ids);
							}
						});
					}
				}
			});

			//设备类别tree结构
			$('#sblb20200530').tree({
				onLoadSuccess: function (node, data) {
					//$(this).tree('collapseAll');
				},
				animate:true,
				formatter:function(node){
					var s = node.text;
					if (node.children){
						s += '&nbsp;<span style=\'color:blue\'>(' + node.children.length + ')</span>';
					}
					return s;
				},
				onClick: function(node){
					let treeIsLeaf = $(this).tree('isLeaf', node.target);
					if(treeIsLeaf){
						$('#menu_edit_20181029').datagrid('load',{
							categoryId: node.id
						});
						console.log(node);
					}
					//console.log(treeParent)
				},
				onContextMenu: function(e, node){
					e.preventDefault();
					// select the node
					$(this).tree('select', node.target);

					//判断是否是叶节点
					let treeIsLeaf = $(this).tree('isLeaf', node.target);
					let add0606zjd = $('#tree-add0606zjd')[0];
					//隐藏和显示菜单指定栏目
					if(treeIsLeaf){
						$('#treeCRUD20200606').menu('hideItem', add0606zjd);
					}else{
						$('#treeCRUD20200606').menu('showItem', add0606zjd);
					}

					//得到父节点
					let treeParent = $(this).tree('getParent', node.target);
					//if(treeIsLeaf){
					console.log(node,treeParent);
					//}

					// display context menu
					$('#treeCRUD20200606').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				}
			});

		});

		$('#menu_edit_20181029').datagrid({
			url: './../device/getDevicePage',
			method: 'get',
			border: false,
		    fit: true,
		    fitColumns: true,
			scrollbarSize: 2, //滚动条宽度
		    striped: true,
			rownumbers: true,
			pagination: true,
			singleSelect: true,
			sortName: 'updateTime',   //定义排序的列名
			sortOrder: 'desc',   //'asc' 或 'desc'。
			nowrap:false, //设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
		    columns:[[
				{field:'idD',title:'id',width:80,hidden:true},
				{field:'updateTime',title:'年/级',width:80,hidden:true},
				{field:'categoryId',title:'专业',width:80,hidden:true},
				{field:'id',title:'学号',width:80},
				{field:'brands',title:'姓名',width:80},
				{field:'type',title:'成绩',width:80},
				{field:'tonnage',title:'考试次数',width:80,
					formatter: function(value,row,index){
						if (parseInt(value) > 1){
							return '<a href="javascript:" title="展示历史考试情况：' +
									'<br/>' +
									'1、2020-10-21：32分' +
									'<br/>' +
									'2、2020-12-22：88分' +
									'" class="note">' + value + '</a>';
						}else{
							return value;
						}
					}
				},
				{field:'contactsPhone',title:'联系电话',width:80,hidden:true},
				{field:'detail',title:'设备详情描述',width:80,hidden:true},
		       	{field:'state',title:'考试状态',width:80,
                    formatter: function(value,row,index){
                        if (value == 1){
                            return '<span class="easyui-dot easyui-status-processing"></span> 正常';
                        } else {
                            return '<span class="easyui-dot easyui-status-error"></span> 停考';
                        }
                    },
					align:'left'
				},
				{field:'month',title:'备注',width:80}
		    ]],
			onRowContextMenu:function(e,index,row){
		    	e.preventDefault();
				$(this).datagrid('unselectAll');
				var addZ = $('#m-delete-20190722')[0];
				var update = $('#m-update-20190722')[0];
				if(!row){
					$('#mm_20181030').menu('hideItem', addZ).menu('hideItem', update);
				}else{
					$('#mm_20181030').menu('showItem', addZ).menu('showItem', update);
					$(this).datagrid('selectRow', index);
				}
				$('#mm_20181030').menu('show', {
					left:e.pageX,
					top:e.pageY
				});
		    },
			onHeaderContextMenu: function(e, field) {
				e.preventDefault();
				$(this).datagrid('columnMenu').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			},
		    onDblClickRow:function(index,row){
				$(this).datagrid('selectRow', index);

				$('#uploadImage20200602Button').show();
				$('#dialog_20190723_addOrUpdateOrMenu').dialog('open').dialog('center').dialog('setTitle','修改');
		    },
			onLoadSuccess:function(data){
				$(".note").tooltip({
					position: 'right',
					onShow: function(){
						$(this).tooltip('tip').css({
							width:'260',
							boxShadow: '1px 1px 3px #292929'
						});
					}
				});
			},
			toolbar:'#toolbar20210220'
		});

	</script>
</body>
</html>